<template>
	<view class="makerElite">
		<navBar isBack backColor="#fff" title="分销精英" color="#fff" background="transparent"></navBar>
		<view class="mE_topImg">
			<image :src="`${baseImg}/static/distri/makerCenter/bg.png`" mode=""></image>
			<!-- 创客精英 -->
			<view class="mE_remoElite">
				<view class="mE_nowRatio">
					{{total}}人
					<view class="mE_nowRatioItem">
						<image :src="`${baseImg}/static/distri/fenxiao/makerEli2.png`" mode=""></image>
						分销精英
					</view>
				</view>
			</view>
		</view>
		
		<!-- 精英列表 -->
		<view class="mE_eliteList" :style="'margin-top:'+navHeight+'rpx;'">
			<view class="mE_eliteItem" v-for="(item,index) in eliteList" :key='index' :style="index==eliteList.length-1?'border:0':''">
				<view class="mE_itemUser">
					<view class="mE_userImg">
						<image :src="item.headimg" mode=""></image>
						<image v-if="item.level==2" :src="`${baseImg}/static/distri/fenxiao/gold.png`" mode=""></image>
						<image v-else-if="item.level==1" :src="`${baseImg}/static/distri/fenxiao/silver.png`" mode=""></image>
						<image v-else="item.level==3" :src="`${baseImg}/static/distri/fenxiao/copper.png`" mode=""></image>
					</view>
				</view>
				<view class="mE_itemRigth">
					{{item.realname}}
					<checkbox-group name="" @change="_changeCheck(index)">
						<label>
							<checkbox value="" :checked="item.checked" color="#DBA954"/>
						</label>
					</checkbox-group>
				</view>
			</view>
			<u-loadmore :status="statusLoading" :icon-type="iconType" :load-text="loadText" />
		</view>
		<view class="btn">
			<view class="left" @click="toCancel">
				<view class="iconBox">
					<i class="iconfont">&#xe6b1;</i>
				</view>
				取消
			</view>
			<button type="default" @click="toadd">确认添加（{{num}}）</button>
		</view>
		
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue';
	import service_distri from '@/service/distri.js';
	export default{
		components:{
			navBar
		},
		data(){
			return{
				statusLoading: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了~'
				},
				page:1,
				pagesize:10,
				eliteList:[],
				maker_num:null,
				navHeight:200,
				baseImg:this.$static,
				total:0
			}
		},
		onLoad(options) {
			this.navHeight = 470 - Number(this.$store.state.system.navBarHeight)*2
			this.getPromoter()
		},
		computed:{
			num(){
				let num = 0
				this.eliteList.map(item=>{
					if(item.checked){
						num+=1
					}
				})
				return num
			}
		},
		onReachBottom() {
			this.page++
			service_distri.get_promoterList({is_staff:2,page:this.page,pagesize:this.pagesize}).then(res=>{
				console.log(res,'分销精英列表')
				if(res.code==1){
					if(!res.data.list.length){
						this.statusLoading = 'nomore'
					}else{
						this.statusLoading = 'loading'
					}
					res.data.list.map(item=>item.checked=false)
					this.eliteList = this.eliteList.concat(res.data.list)
					this.total = res.data.total
				}
			})
		},
		methods:{
			// 获取创客精英
			getPromoter(){
				this.page=1
				uni.showLoading({
					title:'加载中...'
				})
				service_distri.get_promoterList({is_staff:2,page:this.page,pagesize:this.pagesize}).then(res=>{
					console.log(res,'分销精英列表')
					if(res.code==1){
						if(res.data.list.length<10){
							this.statusLoading = 'nomore'
						}
						res.data.list.map(item=>item.checked=false)
						this.eliteList = res.data.list?res.data.list:[]
						this.total = res.data.total
					}
				})
				uni.hideLoading()
			},
			
			//
			_changeCheck(index){
				console.log(index)
				if(!this.eliteList[index].checked){
					this.eliteList[index].checked = true
				}else{
					this.eliteList[index].checked = false
				}
				console.log(this.eliteList,'列表')
			},
			
			// 取消按钮
			toCancel(){
				this.eliteList.map(item=>{item.checked = false})
			},
			
			// 确定按钮
			toadd(){
				let arr = []
				this.eliteList.map(item=>{
					if(item.checked){
						arr.push(item.user_id)
					}
				})
				let staff_user_id = arr.join(',')
				// let staff_user_id = arr
				console.log(arr,'已选择id')
				if(!staff_user_id){
					uni.showToast({
						title:'请选择需要添加的员工',
						icon:'none'
					})
					return
				}
				this.$api.addStaff({staff_user_id}).then(res=>{
					console.log(res,'添加结果')
					if(res.code==1){
						uni.showToast({
							title:'添加成功',
							icon:'success'
						})
						this.getPromoter()
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
				
				
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../iconfont.css';
	.makerElite{
		padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
		.mE_topImg{width: 100%;height: 430rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		// 创客精英
		.mE_remoElite{
			width: 100%;
			position: absolute;
			z-index: 2;
			padding: 0 24rpx 0 36rpx;
			bottom: 60rpx;
			left: 0;
			display: flex;
			align-items: center;
			// margin-top: 78rpx;
			justify-content: space-between;
			.mE_nowRatio{
				font: 500 60rpx/52rpx PingFang SC;
				color: #fff;
				.mE_nowRatioItem{
					margin-top: 20rpx;
					display: flex;
					font: 500 30rpx/40rpx PingFang SC;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}
				}
			}
			.mE_remoBtn{
				width: 160rpx;
				height: 52rpx;
				border: 2rpx solid #FFFFFF;
				border-radius: 26rpx;
				image{width: 32rpx;height: 32rpx;}
				padding: 0 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font: 400 22rpx/52rpx PingFang SC;
				color: #fff;
			}
		}
		
		//精英列表
		.mE_eliteList{
			width: 702rpx;
			// height: 946rpx;
			margin: 0 auto 140rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 10rpx 24rpx 10rpx 24rpx;
			.mE_bor{border: 0;}
			.mE_eliteItem{
				width: 100%;
				padding: 30rpx 0 28rpx 0;
				display: flex;
				align-items: center;
				// justify-content: space-between;
				border-bottom: 2rpx solid #F4F4F4;
				.mE_itemUser{
					flex-shrink: 0;
					.mE_userImg{
						position: relative;
						width: 96rpx;
						height: 96rpx;
						margin-right: 24rpx;
						image:nth-of-type(1){width: 96rpx;height: 96rpx;}
						image:nth-of-type(2){width: 28rpx;height: 28rpx;position: absolute;bottom: 0;right: 0rpx;}
					}
					display: flex;
					align-items: center;
					.mE_userName{
						display: flex;
						flex-direction: column;
						font: 400 22rpx/36rpx PingFang SC;
						color: #A0A0A0;
						span{font: 600 26rpx/40rpx PingFang SC;color: #0A0605;margin-bottom: 12rpx;}
					}
				}
				.mE_itemRigth{
					width: 100%;
					display: flex;
					justify-content: space-between;
					
					font: 400 22rpx/40rpx PingFang SC;
					color: #A0A0A0;
					text-align: right;
					span{font-size: 40rpx; color: #EFB82F; font-weight: 500;}
				}
			}
		}
		
		//最后的确定按钮 
		.btn{
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			position: fixed;
			display: flex;
			justify-content: space-between;
			bottom: 0;
			left:0;
			z-index: 5;
			padding: 0 24rpx;
			height: calc(120rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/
			height: calc(120rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
			padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
			.left{
				display: flex;
				margin: 20rpx 0;
				flex-direction: column;
				align-items: center;
				font: 400 18rpx/20rpx PingFang SC;
				color: #A0A0A0;
				.iconBox{
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					background-color: #F5F5F5;
					text-align: center;
					line-height: 48rpx;
					color: #0A0605;
					margin-bottom: 4rpx;
					.iconfont{
						font-size: 20rpx;
					}
				}
			}
			button{
				width: 606rpx;
				height: 80rpx;
				margin:20rpx 0;
				text-align: center;
				background-color: #DBA954;
				border-radius: 46rpx;
				font: 600 32rpx/80rpx PingFang SC;
				color: #fff;
			}
		}
	}
</style>
